<template>
	<view class="caritem" @click="gopage">
		<view class="t">
			<view class="item u-flex">
				<view class="icon u-flex u-flex-middle">{{$z.$t("名")}}</view>
				<view class="text u-line-1" style="font-weight: bold;">
					{{ item.pcs }}
				</view>
			</view>
			<view class="u-flex" style="padding: 10rpx 30rpx 0 30rpx; flex-wrap: wrap">
				<u-tag v-for="(item, key) in par1" :key="key" :text="item" plain size="mini"
					style="margin-right: 16rpx; margin-bottom: 8rpx"></u-tag>
			</view>
			<view class="item u-flex ParkFee">
				<view class="icon u-flex u-flex-middle">P</view>
				<view class="text u-line-1">{{ item.ParkFee }}</view>
			</view>
			<view class="item u-flex u-flex-between kmc">
				<view class="u-flex">
					<view class="icon u-flex u-flex-middle">{{$z.$t("快")}}</view>
					<view class="">
						{{ item.carzlsum - item.carzlsumcd }}/{{ item.carzlsum }}
					</view>
					<view class="icon u-flex u-flex-middle">{{$z.$t("慢")}}</view>
					<view class="">
						{{ item.carjlsum - item.carjlsumcd }}/{{ item.carjlsum }}
					</view>
				</view>
				<view class="dhbox" @click.stop="dhfn">
					<view class="dhicon iconfont icon-daohang"></view>
					<view class="">{{ jl }}</view>
				</view>
			</view>
		</view>
		<view class="b u-flex">
			<text class="je">{{ df }}</text>
			{{$z.$t("元/度")}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "caritem",
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {};
		},
		asyncComputed: {
			async df() {
				let StationHD = await this.$store.dispatch("request/getRequest", {
					url: "/StationHD",
					data: {
						id: this.item.id,
					},
				});
				if (StationHD.length == 0) {
					return "0";
				}
				if (StationHD[0].type == "1") {
					return Number(StationHD[0].df).div(100);
				}
				let StationCar = this.item;

				let dfarr1 = [
					[{
							label: "尖峰",
							value: "jdf",
						},
						{
							label: "尖峰服务费",
							value: "jfff",
						},
						["jsjsh", "jsjsm", "jsjeh", "jsjem"],
					],
					[{
							label: "高峰",
							value: "fdf",
						},
						{
							label: "高峰服务费",
							value: "ffff",
						},
						["fsjsh", "fsjsm", "fsjeh", "fsjem"],
					],
					[{
							label: "平峰",
							value: "pdf",
						},
						{
							label: "平峰服务费",
							value: "pfff",
						},
						["psjsh", "psjsm", "psjeh", "psjem"],
					],
					[{
							label: "谷峰",
							value: "gdf",
						},
						{
							label: "谷峰服务费",
							value: "gfff",
						},
						["gsjsh", "gsjsm", "gsjeh", "gsjem"],
					],
				];
				let times = [];
				dfarr1.forEach((e) => {
					let je1 = StationCar[e[0].value] / 100;
					let je2 = StationCar[e[1].value] / 100;
					let je3 = Number(StationCar[e[0].value])
						.add(Number(StationCar[e[1].value]))
						.div(100);

					let dsstr = "";
					for (let i = 1; i <= 5; i++) {
						let t1 = StationCar[`${e[2][0]}${i}`];
						let t2 = StationCar[`${e[2][1]}${i}`];
						let t3 = StationCar[`${e[2][2]}${i}`];
						let t4 = StationCar[`${e[2][3]}${i}`];
						if (!t1) {
							t1 = "0";
						}
						if (!t2) {
							t2 = "0";
						}
						if (!t3) {
							t3 = "0";
						}
						if (!t4) {
							t4 = "0";
						}
						t1 = t1 < 10 ? "0" + t1 : t1;
						t2 = t2 < 10 ? "0" + t2 : t2;
						t3 = t3 < 10 ? "0" + t3 : t3;
						t4 = t4 < 10 ? "0" + t4 : t4;

						if (!(t1 == 0 && t2 == 0 && t3 == 0 && t4 == 0)) {
							dsstr = t1 + ":" + t2 + "--" + t3 + ":" + t4;
							times.push([
								...e,
								{
									t1: `${t1}:${t2}`,
									t2: `${t3}:${t4}`,
									je1,
									je2,
									je3,
								},
							]);
						}
					}
				});
				// this.fys = times;
				let dqt = this.$z.timefn.gettime(0, new Date(), `hh:MM`);
				let dqtimes = times.findIndex((e) => {
					let h = dqt.split(":")[0];
					let M = dqt.split(":")[1];
					let h1 = e[3].t1.split(":")[0];
					let M1 = e[3].t1.split(":")[1];
					let h2 = e[3].t2.split(":")[0];
					let M2 = e[3].t2.split(":")[1];
					// 转数字
					h = Number(h);
					M = Number(M);
					h1 = Number(h1);
					M1 = Number(M1);
					h2 = Number(h2);
					M2 = Number(M2);
					return (
						(h1 < h && h < h2) || (h1 == h && M1 <= M) || (h2 == h && M2 >= M)
					);
				});
				if (dqtimes == "-1") {
					return "0";
				}
				// this.dqi = dqtimes;


				return times[dqtimes][3].je3;
			},
		},
		computed: {
			par1() {
				try {
					return this.item?.par1.split(",").filter((e) => {
						return e != "";
					});
				} catch {
					return []
				}

			},
			jl() {
				//POINT(120.12647930852054 30.349640249011436)转换为[120.12647930852054,30.349640249011436]
				try {
					let mpt = this.item.mpt || "";

					mpt = mpt.match(/\d+\.\d+/g);
					let wz = this.$store.state.config.wz;
					return this.$z.getDistances(wz.lat, wz.lng, mpt[1], mpt[0]);
				} catch {
					return "0m";
				}
			},
		},
		methods: {
			gopage() {
				uni.navigateTo({
					url: `/pages/StationCar/StationCar?id=${this.item.id}`
				})
			},
			dhfn() {
				this.$z.openLocation(this.item.mpt)
			},
		},
	};
</script>

<style lang="scss">
	.caritem {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);

		.t {
			background: #f4f9ff;
			padding: 16rpx 0;

			.item {
				height: 72rpx;
				padding-right: 34rpx;
				font-size: 28rpx;

				.dhbox {
					background-color: #fff;
					border: 2rpx solid $uni-color-primary;
					display: flex;
					align-items: center;
					height: 44rpx;
					padding-right: 20rpx;
					border-radius: 26rpx;
					font-size: 24rpx;

					.dhicon {
						background: $uni-color-primary;
						color: #fff;
						width: 46rpx;
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-top-left-radius: 50%;
						border-bottom-left-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.icon {
					min-width: 44rpx;
					height: 44rpx;
					padding: 0 10rpx;
					background-color: #000;
					color: #fff;
					border-radius: 12rpx;
					font-size: 24rpx;
					margin-left: 32rpx;
					margin-right: 16rpx;
				}

				.text {
					width: 0;
					flex: 1;
				}

				&:nth-child(1) {
					.icon {
						background-color: #01a6ec;
					}
				}

				&.ParkFee {
					.icon {
						background-color: #2d83fe;
					}
				}

				&.kmc {
					.icon {
						// background-color: #05ce74;
						background: linear-gradient(to bottom, #67c888, #bfeed9);

						&:nth-child(3) {
							background: linear-gradient(to bottom, #4078e2, #bfc5ee);
						}
					}
				}
			}
		}

		.b {
			height: 100rpx;
			padding-left: 32rpx;
			font-size: 24rpx;

			.je {
				font-size: 36rpx;
				font-weight: bold;
				color: $u-primary;
				margin-right: 12rpx;
			}
		}
	}
</style>